<script setup lang="ts">
// 定义产品数据
const products = ref([
  {
    id: 1,
    title: '智能工厂解决方案',
    subtitle: '智能工厂',
    description: '提供全方位的工厂自动化和智能化解决方案，帮助企业实现数字化转型。',
    bgColor: 'bg-blue-500',
    hoverColor: 'group-hover:text-blue-600',
    iconPath: 'M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z'
  },
  {
    id: 2,
    title: '机器人控制系统',
    subtitle: '机器人控制',
    description: '先进的机器人控制系统，具有高精度、高可靠性和易用性等特点。',
    bgColor: 'bg-green-500',
    hoverColor: 'group-hover:text-green-600',
    iconPath: 'M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z'
  },
  {
    id: 3,
    title: '数据分析平台',
    subtitle: '数据分析',
    description: '强大的数据分析平台，帮助企业实时监控生产状态，优化生产流程。',
    bgColor: 'bg-purple-500',
    hoverColor: 'group-hover:text-purple-600',
    iconPath: 'M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z'
  }
])
</script>

<template>
  <!-- 产品介绍 -->
  <section id="products" class="section bg-white w-full py-16">
    <div class="w-full max-w-[2000px] mx-auto px-4 md:px-8 lg:px-16">
      <div class="text-center mb-12">
        <h2 class="text-3xl lg:text-4xl font-bold mb-4">
          <span
            class="bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 bg-clip-text text-transparent">产品介绍</span>
        </h2>
        <p class="text-lg text-gray-600 text-center">
          我们提供全方位的智能工业解决方案，助力企业实现数字化转型升级
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 循环生成产品卡片 -->
        <div
          v-for="product in products"
          :key="product.id"
          class="group bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div :class="['h-48 flex items-center justify-center', product.bgColor]">
            <div class="text-white text-center">
              <div class="w-16 h-16 mx-auto mb-3 bg-white/20 rounded-full flex items-center justify-center transform transition-transform duration-300 group-hover:scale-110">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fill-rule="evenodd"
                    :d="product.iconPath"
                    clip-rule="evenodd"
                  />
                </svg>
              </div>
              <p class="font-semibold">{{ product.subtitle }}</p>
            </div>
          </div>
          <div class="p-6">
            <h3 :class="['text-xl font-bold mb-3 text-gray-900 transition-colors', product.hoverColor]">{{ product.title }}</h3>
            <p class="text-gray-600 leading-relaxed">
              {{ product.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
